<template>
    <div class="submit-container">
        <better-scroll ref="scroll" class="scroll-t" :bounce="false">
            <div class="addr-box plr15 ptb10" @click="$router.push({name:'address-list'})">
                <div class="addr-info" v-if="setAddressInfo.id">
                    <span class="addr-name row1">{{setAddressInfo.name}}</span>&nbsp;
                    <span class="addr-phone">{{setAddressInfo.phone}}</span>
                </div>
                <h4 class="addr-title row1" v-if="setAddressInfo.id">{{setAddressInfo.detail}}</h4>
                <h4 class="addr-choice" v-if="!setAddressInfo.id">还没有收货地址，选择收货地址</h4>
                <van-icon name="arrow" class="addr-arrow"/>
            </div>
            <div class="submit-goods-box">
                <div class="submit-goods-info" v-for="attr in destineGoodsSubmit.shops">
                    <h3 class="submit-goods-title plr15">{{attr.name}}</h3>
                    <ul class="submit-goods-content">
                        <li class="submit-goods-item plr15 ptb10" v-for="item in attr.items">
                            <img :src="item.img" alt="">
                            <div class="goods-item-main flex-column">
                                <span class="goods-item-title row2">{{item.name}}</span>
                                <span class="goods-item-price">¥ {{computePrice(item.price)}}</span>
                                <span class="goods-item-number">x{{item.num}}</span>
                            </div>
                        </li>
                        <li class="submit-goods-li plr15 flex-row">
                            <span
                                class="submit-goods-name"
                            >邮费 {{attr.freeAmount?'(满¥'+computePrice(attr.freeAmount)+'包邮)':''}}</span>
                            <span class="submit-goods-value">¥ {{computePrice(attr.postage)}}</span>
                        </li>
                        <li class="submit-goods-li plr15 flex-row">
                            <span class="submit-goods-name">买家留言</span>
                            <input type="text" v-model="attr.mark">
                        </li>
                    </ul>
                </div>
            </div>
            <ul class="submit-ul">
                <li class="submit-goods-li plr15 flex-row">
                    <span>可抵扣购物积分</span>
                    <span>{{computePrice(destineGoodsSubmit.shop_point)}}</span>
                </li>
                <li class="submit-goods-li plr15 flex-row">
                    <span>可抵扣增值积分</span>
                    <span>{{computePrice(destineGoodsSubmit.bonus_point)}}</span>
                </li>
                <li class="submit-goods-li plr15 flex-row">
                    <span>总数量</span>
                    <span>{{destineGoodsSubmit.total_num}}</span>
                </li>
                <li class="submit-goods-li plr15 flex-row">
                    <span>总金额</span>
                    <span>¥ {{computePrice(destineGoodsSubmit.total_amount)}}</span>
                </li>
                <li class="submit-goods-li plr15 flex-row" @click="isShow">
                    <span>支付方式</span>
                    <div class="flex-row">
                        <span>{{payMethods.title}}</span>
                        <van-icon name="arrow"/>
                    </div>
                </li>
                <!--<li class="submit-goods-li plr15 flex-row" v-if="type=='gift'&&!isInvestMember"-->

                <!--@click="investInfoShow = true">-->
                <!--<span>注册投资会员</span>-->
                <!--<div class="flex-row">-->
                <!--<span style="color: #999;">购买礼包请注册投资会员</span>-->
                <!--<van-icon name="arrow"/>-->
                <!--</div>-->
                <!--</li>-->
                <!--注册投资会员-->
                <li v-if="destineGoodsSubmit.giftID&&!isInvestMember&&giftType==1">
                    <h3 class="invest-title">投资人信息</h3>
                    <van-cell-group>
                        <van-field
                            label="真实姓名"
                            v-model="registerForm.real_name"
                            placeholder="请输入真实姓名"
                        />
                        <van-field
                            label="手机号"
                            v-model="registerForm.phone"
                            placeholder="请输入手机号"
                            type="number"
                            maxlength="11"
                        />
                        <verify-code
                            :tel="registerForm.phone"
                            v-model="registerForm.code"
                            :type="0"
                            @codeValue="codeValue"
                            class="verity-code"
                        ></verify-code>
                        <van-field
                            label="开户银行"
                            v-model="registerForm.bank_name"
                            placeholder="请输入开户银行"
                        />
                        <van-field
                            label="银行卡号"
                            v-model="registerForm.bank_code"
                            placeholder="请输入银行卡号"
                            type="number"
                        />
                        <van-field
                            label="开户行地址"
                            v-model="registerForm.bank_addr"
                            placeholder="请输入开户行地址"
                        />
                        <van-field label="身份证" v-model="registerForm.idcard" placeholder="请输入身份证"/>
                        <van-field
                            label="推荐人"
                            v-model="recommendMan"
                            placeholder="请输入推荐人姓名"
                            @blur="checkInvestRecommend"
                        />
                        <van-field
                            label="接点人"
                            v-model="contaceMan"
                            placeholder="请输入接点人姓名"
                            @blur="checkContactMan"
                        />
                        <van-field
                            label="接点位置"
                            v-model="registerForm.seat"
                            placeholder="请选择接点位置"
                            disabled="true"
                            is-link
                            @click.native="openPopup(0)"
                        />
                        <van-field label="详细地址" v-model="registerForm.addrs" placeholder="请输入详细地址"/>
                    </van-cell-group>
                </li>
            </ul>
        </better-scroll>
        <van-submit-bar
            label="实付金额："
            :price="destineGoodsSubmit.real_amount"
            button-text="提交订单"
            @submit="save"
        ></van-submit-bar>
        <van-popup v-model="show" position="bottom">
            <h3 class="pay-methods-title ptb10">支付方式</h3>
            <li
                class="plr15 fs16 ptb10 pay-methods-item"
                v-for="item in payMethodsList"
                @click="choicePay(item)"
            >{{item.title}}
            </li>
        </van-popup>
        <van-dialog v-model="isShowDialog" show-cancel-button :before-close="beforeClose">
            <van-field type="password" v-model="password" label="二级密码" placeholder="输入二级密码"></van-field>
        </van-dialog>
        <van-popup v-model="show" position="bottom" class="popup-box plr15">
            <h3 class="flex-column popup-title">{{popupInfo.type==0?'接点位置':'投资额度'}}</h3>
            <ul class="ptb15">
                <li
                    v-for="item in popupInfo.list"
                    class="flex-column popup-item"
                    @click="popupChoice(item,popupInfo.type)"
                >{{item}}
                </li>
            </ul>
        </van-popup>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import md5 from "js-md5";
    import verifyCode from "../../components/VerificationCode";

    export default {
        name: "ShoppingSubmit",
        components: {verifyCode},
        data() {
            return {
                addrList: [],
                show: false,
                payMethodsList: [
                    {
                        value: "point",
                        title: "积分支付"
                    },
                    {
                        value: "alipay_wap",
                        title: "支付宝支付"
                    },
                    {
                        value: "wx_wap",
                        title: "微信支付"
                    }
                ],
                payMethods: "",
                isShowDialog: false,
                password: "",
                wxPayApi: "http://mall.tianspace.vip/apppay?oid=",
                type: "",
                isInvestMember: false,
                registerForm: {
                    real_name: "",
                    phone: "",
                    code: "",
                    bank_name: "",
                    bank_code: "",
                    bank_addr: "",
                    idcard: "",
                    rf: "", // 推荐人编号
                    node: "", //接点人编号
                    seat: "",
                    addrs: ""
                },
                recommendMan: "", //推荐人
                contaceMan: "", //接点人
                isPwd2: true,
                popupInfo: {type: 0, list: []},
                moneyList: [3000, 5000, 10000, 20000],
                seatList: ["左", "中", "右"],
                show: false,
                giftType: 0
            };
        },
        computed: {
            ...mapGetters(["setAddressInfo", "destineGoodsSubmit", "userInfo"])
        },
        activated() {
            this.giftType = this.$route.query.type;
            for (let i in this.registerForm) {
                this.registerForm[i] = this.userInfo[i];
            }
            if (this.destineGoodsSubmit.giftID) {
                this.$store.dispatch(types.INVEST_CHECKUSER, {
                    name: this.userInfo.name,
                    check_invest: true
                }).then(res => {
                    this.isInvestMember = res.code == 0;
                });
            }

            for (let i in this.destineGoodsSubmit.shops) {
                this.destineGoodsSubmit.shops[i].mark = "";
            }
            this.payMethods = this.payMethodsList[0];
        },
        created() {
            this.getAddressList();
        },
        methods: {
            isShow() {
                if (this.destineGoodsSubmit.real_amount > 0) {
                    this.show = true;
                }
            },
            //获取地址列表
            getAddressList() {
                this.$store.dispatch(types.GET_ADDRESS_LIST).then(res => {
                    if (res.code !== 0) return;
                    console.log(res);
                    this.addrList = res.items;
                    this.addrList.forEach(item => {
                        if (item.isDefault) {
                            this.$store.commit(types.SET_ADDRESS_CHOICE, item);
                            return;
                        }
                    });
                });
            },
            save() {
                if (!this.setAddressInfo.id) return this.fail("请选择地址");
                if (this.destineGoodsSubmit.giftID && !this.isInvestMember && this.giftType == 1) {
                    if (this.registerForm.real_name == "")
                        return this.fail("真实姓名不能为空");
                    if (this.registerForm.phone == "")
                        return this.fail("手机号不能为空");
                    if (this.validatePhone(this.registerForm.phone))
                        return this.fail("请输入正确的手机号码");
                    if (this.registerForm.code == "")
                        return this.fail("请输入验证码");
                    if (this.registerForm.bank_name == "")
                        return this.fail("开户银行不能为空");
                    if (this.registerForm.bank_code == "")
                        return this.fail("银行卡号不能为空");
                    if (this.registerForm.bank_addr == "")
                        return this.fail("开户行地址不能为空");
                    if (this.registerForm.idcard == "")
                        return this.fail("身份证不能为空");
                    if (this.registerForm.rf == "")
                        return this.fail("推荐人不能为空");
                    if (this.registerForm.node == "")
                        return this.fail("接点人不能为空");
                    if (this.registerForm.seat == "")
                        return this.fail("请选择接点位置");
                    if (this.registerForm.seat == "左") this.registerForm.seat = 1;
                    if (this.registerForm.seat == "中") this.registerForm.seat = 2;
                    if (this.registerForm.seat == "右") this.registerForm.seat = 3;
                }
                if (
                    this.destineGoodsSubmit.shop_point ||
                    this.destineGoodsSubmit.bonus_point ||
                    this.payMethods.value == "point"
                ) {
                    return (this.isShowDialog = true);
                }
                this.onSubmit();
            },
            onSubmit() {
                let form = {
                    addr: this.setAddressInfo.id,
                    shops: [],
                    total: this.destineGoodsSubmit.total_amount,
                    is_app: true,
                    original_amount: this.destineGoodsSubmit.original_amount,
                    isGift: this.destineGoodsSubmit.giftID ? true : false
                };
                if (form.isGift) {
                    form.giftID = this.destineGoodsSubmit.giftID;
                    if (!this.isInvestMember&&this.giftType==1) {
                        for (let i in this.registerForm) {
                            form[i] = this.registerForm[i];
                        }
                    }
                }
                if (this.payMethods.value != "point")
                    form.pay_type = this.payMethods.value;
                if (this.password) form.pwd2 = md5(this.password);
                for (let i in this.destineGoodsSubmit.shops) {
                    let ids = [];
                    this.destineGoodsSubmit.shops[i].items.forEach(item => {
                        ids.push(item.id);
                    });
                    form.shops.push({
                        id: this.destineGoodsSubmit.shops[i].id,
                        mark: this.destineGoodsSubmit.shops[i].mark,
                        prd: ids
                    });
                }
                this.$store.dispatch(types.CART_CREATE_ORDER, form).then(res => {
                    console.log(res);
                    if (res.code != 0) return this.fail(res.msg);
                    this.$store.dispatch(types.CART_NUM);
                    this.$router.replace({name: "order-list"});
                    if (form.pay_type == "alipay_wap") {
                        this.Deal_AliPay(res);
                    } else if (form.pay_type == "wx_wap") {
                        var url = this.wxPayApi + res.ordID;
                        window.location.href = url;
                    }
                });
            },
            Deal_AliPay(r) {
                var first = true;
                var params = "";
                for (var key in r.pay_params) {
                    if (!first) {
                        params += "&";
                    }
                    params += key + "=" + encodeURIComponent(r.pay_params[key]);
                    first = false;
                }
                var url = r.pay_url + params;
                window.location.href = url;
            },

            //关闭弹框触发
            beforeClose(action, done) {
                console.log(action);
                console.log(this.password);
                if (action == "confirm") {
                    if (this.password == "") {
                        this.fail("请输入二级密码");
                        done(false);
                        return;
                    } else {
                        this.onSubmit();
                        done();
                    }
                } else {
                    done();
                }
            },
            choicePay(item) {
                this.show = false;
                this.payMethods = item;
            },
            codeValue(value) {
                this.registerForm.code = value;
            },
            //检测推荐人
            checkInvestRecommend() {
                if (this.recommendMan == "") return this.fail("推荐人不能为空");
                this.load();
                this.$store
                    .dispatch(types.INVEST_CHECKUSER, {
                        name: this.recommendMan,
                        check_invest: true
                    })
                    .then(res => {
                        this.clear();
                        console.log(res);
                        if (res.code == 0) {
                            this.recommendMan =
                                this.recommendMan + "(" + res.name + ")";
                            this.registerForm.rf = res.uid;
                            return;
                        }
                        this.recommendMan = "";
                        this.fail(res.msg);
                    });
            },
            //检测接点人
            checkContactMan() {
                if (this.contaceMan == "") return this.fail("接点人不能为空");
                this.load();
                this.$store
                    .dispatch(types.INVEST_CHECKUSER, {
                        name: this.contaceMan,
                        check_point: true
                    })
                    .then(res => {
                        this.clear();
                        console.log(res);
                        if (res.code == 0) {
                            this.contaceMan =
                                this.contaceMan + "(" + res.name + ")";
                            this.registerForm.node = res.uid;
                            return;
                        }
                        this.contaceMan = "";
                        this.fail(res.msg);
                    });
            },
            //打开popup
            openPopup(index) {
                console.log(index);
                if (index == 0) {
                    this.popupInfo.list = this.seatList;
                    this.popupInfo.type = 0;
                }
                if (index == 1) {
                    this.filterInvest();
                    this.popupInfo.type = 1;
                }
                this.show = true;
            },
            //popup回掉
            popupChoice(value, type) {
                this.show = false;
                if (type == 0) return (this.registerForm.seat = value);
            },
            //过滤投资金额
            filterInvest() {
                this.popupInfo.list = [];
                this.moneyList.filter(item => {
                    if (item > this.computePrice(this.userInfo.invest))
                        this.popupInfo.list.push(item);
                });
            }
        }
    };
</script>

<style scoped lang="scss">
    .submit-container {
        font-size: 14px;
        padding-bottom: 50px;
    }

    .addr-box {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 70px;
        background: #fff;
        .addr-choice {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            height: 100%;
        }
        .addr-info {
            display: flex;
            font-size: 16px;
            font-weight: bold;
            .addr-name {
                display: inline-flex;
                max-width: 100px;
            }
        }
        .addr-arrow {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translate(0, -50%);
            color: #999;
            font-size: 20px;
        }
    }

    .submit-goods-box {
        font-size: 14px;
        margin-top: 10px;
        .submit-goods-info {
            background: #fff;
            margin-bottom: 5px;
            &:last-child {
                margin-bottom: 0;
            }
            .submit-goods-title {
                height: 30px;
                line-height: 30px;
                border-bottom: 1px solid #efefef;
            }
            .submit-goods-content {
                .submit-goods-item {
                    display: flex;
                    height: 80px;
                    border-bottom: 1px solid #efefef;
                    img {
                        display: inline-flex;
                        width: 60px;
                        height: 60px;
                        margin-right: 10px;
                        background: red;
                    }
                    .goods-item-main {
                        position: relative;
                        align-items: flex-start;
                        justify-content: space-between;
                        flex: 1;
                        .goods-item-title {
                            width: 90%;
                        }
                        .goods-item-number {
                            position: absolute;
                            right: 0;
                            top: 0;
                        }
                    }
                }
            }
        }
    }

    .submit-goods-li {
        height: 40px;
        border-bottom: 1px solid #efefef;
        input {
            width: 70%;
            height: 100%;
            text-align: right;
        }
    }

    .submit-ul {
        background-color: #fff;
        margin-top: 10px;
    }

    .van-submit-bar {
        bottom: 0;
    }

    .scroll-t {
        bottom: 50px;
    }

    .pay-methods-title {
        font-size: 18px;
        text-align: center;
        border-bottom: 1px solid #eee;
    }

    .pay-methods-item {
        border-bottom: 1px solid #fbf5f5;
    }

    .popup-box {
        font-size: 14px;
        .popup-title {
            font-size: 16px;
            height: 40px;
            justify-content: center;
            border-bottom: 1px solid #efefef;
        }
        .popup-item {
            height: 40px;
            justify-content: center;
        }
    }

    .invest-title {
        padding: 10px 0;
        text-align: center;
        font-size: 16px;
    }
</style>
